Unverankerte Aktionsschaltfläche hinzufügen

Compose ausprobieren

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Hinzufügen von Komponenten in Compose

Unverankerte Aktionsschaltfläche →

Eine unverankerte Aktionsschaltfläche (UAS) ist eine runde Schaltfläche, mit der die primäre Aktion in der Benutzeroberfläche Ihrer App ausgelöst wird. Auf dieser Seite erfahren Sie, wie Sie das FAB in Ihr Layout einfügen, sein Aussehen anpassen und auf Tippen auf die Schaltfläche reagieren.

Weitere Informationen zum Entwerfen einer unverankerten Aktionsschaltfläche in Ihrer App gemäß den Material Design-Richtlinien finden Sie unter Schaltflächen: Unverankerte Aktionsschaltfläche.

Abbildung 1: Eine unverankerte Aktionsschaltfläche

Unverankerte Aktionsschaltfläche zum Layout hinzufügen

Der folgende Code zeigt, wie die FloatingActionButton in Ihrer Layoutdatei aussehen sollte:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

Standardmäßig wird der FAB mit dem Attribut colorAccent eingefärbt, das Sie mit der Farbpalette des Designs anpassen können.

Sie können andere FAB-Attribute entweder mit XML-Attributen oder mit entsprechenden Methoden konfigurieren, z. B.:

• Die Größe des FAB, die mit dem Attribut app:fabSize oder der Methode setSize() festgelegt wird.
• Die Farbe des Ripples des schwebenden Aktionsschaltfläche (FAB) mit dem Attribut app:rippleColor oder der Methode setRippleColor().
• Das Symbol für das schwebende Aktionsschaltfläche mit dem Attribut android:src oder der Methode setImageDrawable().

Auf Schaltflächen-Taps reagieren

Anschließend können Sie einen View.OnClickListener anwenden, um Tippen auf das FAB zu verarbeiten. Im folgenden Code wird beispielsweise ein Snackbar angezeigt, wenn der Nutzer auf die Schaltfläche tippt:

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Weitere Informationen zu den Funktionen des FAB finden Sie in der API-Referenz für FloatingActionButton.